<template>
  <div class="order">
    <!-- 左侧 分类 -->
    <div class="classify_wrapper">
      <div class="content">
        <ul>
          <li
            v-for="(item,index) in shopGood"
            :key="index"
            :class="{common:index==currentIndex}"
            @click="toggleItem(index)"
          >{{item.name?item.name:'null'}}</li>
        </ul>
      </div>
    </div>
    <!-- 右侧 食物详情 -->
    <div class="menu_wrapper">
      <div class="content">
        <ul ref="foodsUl">
          <li v-for="(item,index) in shopGood" :key="index">
            <h6>{{item.name}}</h6>
            <ul>
              <li v-for="(item,index) in item.foods" :key="index" @click="showFood(item)">
                <img v-lazy="'http://elm.cangdu.org/img/'+item.image_path" alt="菜样图片">
                <div class="good_des">
                  <p>{{item.name}}</p>
                  <span>{{item.description}}</span>
                  <div>
                    <i>{{item.month_sales}}</i>
                    <i>{{item.satisfy_rate}}</i>
                  </div>
                  <div class="good_price">
                    <span>￥{{item.specfoods[0].price}}</span>
                    <span>
                      <!-- 购物车添加 减少 -->
                      <cartControl :food="item"></cartControl>
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- 购物车 -->
    <shopCart></shopCart>
    <!-- 大图食物图片 -->
    <bigFood :food="food" ref="bigFood"></bigFood>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { mapState } from "vuex";
import cartControl from "../../../components/cartControl/cartControl.vue";
import bigFood from "../../../components/bigFood/bigFood.vue";
import shopCart from "../../../components/ShopCart/ShopCart.vue";
export default {
  data() {
    return {
      scrollY: 0,
      tops: [],
      food: {},
    };
  },
  created() {
    this.$store.dispatch("reciveGood", this.$route.params.id);
  },
  computed: {
     ...mapState(["shopGood"]),
    /* 3.计算 */
    currentIndex() {
      const { scrollY, tops } = this;
      const index = tops.findIndex((top, index) => {
        return scrollY >= top && scrollY < tops[index + 1];
      });
      return index;
    }
  },
  watch: {
    shopGood() {
      // 数据跟新，并且刷新了dom才执行
      this.$nextTick(() => {
        this.list = new BScroll(".classify_wrapper", {
          click: true
        });
        this.menu = new BScroll(".menu_wrapper", {
          probeType: 2,
           click: true
        });
        //1.收集scrollY
        this.menu.on("scroll", ({ x, y }) => {
          this.scrollY = Math.abs(y);
        });
        this.menu.on("scrollEnd", ({ x, y }) => {
          this.scrollY = Math.abs(y);
        });

        //收集li数组中的clientHeight
        /* 2.初始化tops */
        let tops = [];
        let top = 0;
        tops.push(top);
        const lis = this.$refs.foodsUl.childNodes;
        Array.prototype.slice.call(lis).forEach(li => {
          top = top + li.clientHeight;
          tops.push(top);
        });
        this.tops = tops;
      });
    }
  },
  methods: {
    //4.点击分类项，右侧滑动
    toggleItem(index) {
      //得到目标scrollY
      const scrollY = this.tops[index];
      this.scrollY = scrollY;
      this.menu.scrollTo(0, -scrollY, 500);
    },
    //显示隐藏大图, 父组件调用子组件的方法
    showFood(item) {
      this.food = item;
      console.log("赋值成功");
      this.$refs.bigFood.toggleShow();
    }
  },
  updated() {},
  components: {
    cartControl,
    bigFood,
    shopCart
  }
};
</script>
<style lang="scss" scoped>
.order {
  display: flex;
  flex-flow: wrap;
  .classify_wrapper {
    width: 20%;
    height: 50vh;
    overflow: hidden;
    margin-top: 0.15rem;
    .content {
      ul {
        li {
          font-size: 12px;
          display: flex;
          justify-content: space-around;
          padding: 15px 2px;
          color: #666;
          background-color: rgb(248, 248, 248);
          font-family: PingFang SC, Helvetica;
          img {
            width: 20%;
            height: 100%;
          }
        }
        .common {
          background-color: white;
          color: rgb(0, 143, 255);
          font-weight: 600;
        }
      }
    }
  }
  .menu_wrapper {
    width: 75%;
    overflow: hidden;
    height: 50vh;
    margin-top: 0.25rem;
    margin-left: 10px;
    .content {
      font-size: 12px;
      h6 {
        width: 100%;
        color: #666666;
        font-size: 0.25rem;
        margin-bottom: 5px;
        font-weight: 600;
      }
      ul {
        ul {
          li {
            display: flex;
            margin-bottom: 10px;
            img {
              width: 33%;
              height: 100%;
            }
            .good_des {
              margin-left: 5px;
              margin-right: 10xp;
              p {
                font-weight: 700;
                overflow: hidden;
                font-size: 0.25rem;
                white-space: nowrap;
                width: 4rem;
                width: 40vw;
                text-overflow: ellipsis;
                margin-bottom: 0.18rem;
              }
              span {
                margin: 1.333333vw 0;
                font-size: 0.15rem;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 4.266667rem;
                width: 42.666667vw;
                margin-bottom: 0.18rem;
                display: block;
              }
              i {
                color: #999;
                margin-right: 5px;
                margin-bottom: 0.15rem;
              }
              .good_price {
                margin-top: 0.4rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 60%;
                span {
                  color: #ff5339;
                  font-size: 0.3rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
/* 懒加载 */
img[lazy=loading] {
  width: 100px;
  height: 100px;
  background-image: url('./muen1.jpeg');
}
</style>